<template>
     <div class="">
        <el-container class="form-container" style="">
            <el-card class="box-card" shadow="never">
                <div slot="header" class="clearfix">
                    <span>角色信息查看</span>
                    <el-button type="primary" size="mini" style="float:right;padding: 6px 9px;" @click="handlerEdit">编辑</el-button>
                </div>
                <div >
                   <el-form   ref="form"   :model="form" size="small" label-width="120px">
                        <el-row>
                        <el-col :span="12">
                                <el-form-item  label="角色名" prop="fdName">
                                    {{form.fdName}}
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item  label="所属分类"  prop="fdCateName" >
                                    {{form.fdCateName}}
                                </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col :span="24">
                                <el-form-item  label="用户指派"  prop="fdOrgName">
                                    {{form.fdOrgName}}
                                </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col :span="12">
                                <el-form-item  label="是否有效"  prop="fdIsAvaliable">
                                    <el-switch v-model="form.fdIsAvaliable" :disabled="true"/>
                                </el-form-item>
                            </el-col>
                          </el-row>
                   </el-form>
                   <el-row>
                       <el-col :span="24" v-for="(cateItem) in resList" v-show="cateItem.res.length>0" :key="cateItem.cateId">
                          <el-card class="box-card card">
                            <div slot="header" >
                              <span>{{cateItem.cateName}}</span>
                            </div>
                            <div>
                                <el-checkbox v-model="item.checked" v-for="(item,i) in cateItem.res" :key="item.id" :label="item.name"
                                @change="checked=>handleUpdateRes(checked,item,i)" :disabled="true"></el-checkbox>
                            </div>
                          </el-card>
                        </el-col>
                   </el-row>
                   
                </div>
            </el-card>
        </el-container>
    </div>
</template>
<script>
import dateUtils from '@/utils/dateUtils';
import formUtils from '@/utils/formUtils';
export default {
    name: "SysPermissionRoleAdd",
    components: {
    },
    data() {
        return {
          form: {
            fdCateName:'',
            fdName:'',
            fdCreateTime:'',
            fdIsAvaliable:'true',
            fdId:'',
            fdCateId:'',
            checkedRes:[],
            fdOrgId:'',
            fdOrgName:'',
          },
          optionData: [],
          props: {
            label: "name",
            value: "id",
          },
          resList:[],
          
        }
    },
    created() {
        this.initParam();
        this.showResAndCates();
    },
    methods: {
        handlerEdit() {
            const params = {
                path: "/sys/permission/sys_permission_role/edit",
                query: {id:this.form.fdId}
            }
            this.$router.push(params);
        },
        initParam() {
            let fdId = this.$route.query.id;
            if(formUtils.isNotEmpty(fdId)){
                this.$fetch('/api/sys/permission/sys_permission_role',{
                    id:fdId
                }).then((res) => {
                    formUtils.convertToForm(res.data,this.form);
                });
            }
            let fdCategoryId = this.$route.query.fdCategoryId;
            if(formUtils.isNotEmpty(fdCategoryId)){
                this.$fetch('/api/sys/permission/sys_permission_role_category',{
                    id:fdCategoryId
                }).then((res) => {
                  this.form.fdCateId = res.data.fdId;
                  this.form.fdCateName = res.data.fdName;
                });
            };
            this.$fetch('/api/sys/permission/sys_permission_role_category/treeData',{
            }).then((res) => {
                this.optionData = res.data;
            });
        },
        showResAndCates() {
          let fdId = this.$route.query.id;
          this.$fetch('/api/sys/permission/sys_permission_res/all',{
              fdRoleId:fdId
          }).then((res) => {
              this.resList = res.data;
              res.data.forEach((value,index)=>{
                  let a = value.res.filter(v=>v.checked);
                  if(formUtils.isNotEmpty(a)){
                    this.form.checkedRes = this.form.checkedRes.concat(a.map(o=>o.key));
                  }
              })
          });
        },
    }
}
</script>
<style scoped >
@import "~@/assets/css/form.css";
.card{
  margin-bottom: 10px;
}
</style>